<!-- 新增/更新抽屉组件（右） -->
<script setup>
import {defineProps, defineEmits} from 'vue'

// 接收父组件的参数
const props = defineProps({
    visible: {type: Boolean, default: true}, // 控制抽屉显示/隐藏
    title: {type: String, default: '操作'}, // 抽屉标题
    width: {type: String, default: '600px'} // 抽屉宽度
})

// 向父组件发送事件
const emit = defineEmits(['update:visible', 'submit'])

// 关闭抽屉：通知父组件更新visible状态
const handleClose = () => emit('update:visible', false)

// 点击确定按钮：通知父组件执行提交逻辑
const handleSubmit = () => {
    emit('submit')
}
</script>

<!-- 公共抽屉组件：只处理基础UI和显示状态 -->
<template>
    <el-drawer :model-value="visible" :title="title" :width="width" @close="handleClose">
        <template #header>

        </template>
        <!-- 插槽：接收外部传入的内容（如AddForm组件） -->
        <slot name="saveOrUpdate"></slot>

        <!-- 底部按钮区域：也可通过插槽自定义，或保持通用 -->
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <!-- 提交按钮：点击后通知父组件处理业务逻辑 -->
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </el-drawer>
</template>

<style scoped lang="sass">

</style>
